<script setup lang="ts">
import { User, Lock, View } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { ref } from 'vue';
import { userRegisterService, userLoginService } from '@/api/user.js'
import { useUserStore } from '@/stores/total.js'
import { useRouter } from 'vue-router';

const fromModel = ref({
    username: '',
    email: "",
    password: '',
})
const rules = {
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 5, max: 10, message: '必须是5-10位的字符', trigger: 'blur' }
    ],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' },
    { pattern: /^\S{6,15}$/, message: "密码必须是6-15位的非空字符" }
    ],
    email: [{ required: true, message: '请输入邮箱', trigger: 'blur' },
    { pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: "邮箱必须是@xx.abc" },
    ],
}
const flag = ref(false);
const check = ref(false);
const checkItem = ()=>{
   check.value = !check.value
}

const formRegister = ref()
const register = async () => {
    await formRegister.value.validate()
    let res = await userRegisterService(fromModel.value.username, fromModel.value.email, fromModel.value.password) as { data: { code: number } };
    if (res.data.code == 0) {
        ElMessage({
            message: '注册成功',
            type: 'success',
        })
        fromModel.value = {
            username: '',
            email: '',
            password: ''
        }
        flag.value = true
    } else {
        ElMessage.error({
            message: '注册失败',
            type: 'error',
        })
    }
}

const loginForm = ref()
const userStore = useUserStore()
const router = useRouter()
const loginBtn = async () => {
    await loginForm.value.validate()
    const res = await userLoginService(fromModel.value.username, fromModel.value.password) as { data: { code: number, token: string, message: string } };
    // console.log("res", res);
    userStore.setToken(res.data.token)
    if (res.data.token) {
        ElMessage({
            message: '登录成功',
            type: 'success',
        })
        router.push({
            name: 'home'
        })
        userStore.setName(fromModel.value.username)
    } else {
        ElMessage({
            message: `登录失败${res.data.message}`,
            type: 'error',
        })
    }
}

const btn = () =>{
    flag.value = !flag.value
    fromModel.value = {
            username: '',
            email: '',
            password: ''
        }
}








</script>

<template>
    <div class="body">
        <h2 v-show="flag">华米账号登陆</h2>
        <h2 v-show="!flag">华米账号注册</h2>
        <div class="img-box"><img class="logo" src="../../assets/微信图片_20231202101836.png" alt=""></div>
        <p style="text-align: center;margin-top: 14px;
    padding: 0 28px;color:#666">每个人都能享受科技的乐趣</p>
        <div class="registerBox" v-if="!flag">
            <el-form :model="fromModel" :rules="rules" class="form" id="a-form" ref="formRegister" label-position="left"
                style="max-width: 460px" label-width="100px">
                <el-form-item label="用户名" prop="username">
                    <el-input size="large" :prefix-icon="User" v-model="fromModel.username" type="text" class="form_input"
                        placeholder="请输入用户名" autocomplete="off" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input size="large" :prefix-icon="Lock" v-model="fromModel.password" type="password"
                        class="form_input" placeholder="请输入密码" autocomplete="off" />
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input size="large" :prefix-icon="View" v-model="fromModel.email" type="text" class="form_input"
                        placeholder="请输入邮箱" autocomplete="off" />
                </el-form-item>
                <p class="goLogin"><span class="btn" @click="btn">去登录</span></p>
                <span class="accpet">已阅读并同意小米账号 <span class="detil">用户协议</span> 和    <span class="detil">隐私政策</span></span>
                <img v-show="check" @click="checkItem" class="check" src="../../assets/圆圈_选中.png" alt="">
                <img v-show="!check" @click="checkItem" class="check" src="../../assets/未选中圆圈.png" alt="">
                <el-button v-show="!check" disabled class="submit" type="primary"  style="min-width: 200px" round @click="register">注册</el-button>
                <el-button v-show="check" class="submit" type="primary"  style="min-width: 200px" round @click="register">注册</el-button>
            </el-form>
        </div>
        <div class="loginBox" v-if="flag">
            <el-form  ref="loginForm" class="form" id="b-form" :model="fromModel" :rules="rules" label-position="left"
                style="max-width: 460px" label-width="100px">
                <el-form-item label="用户名" prop="username">
                    <el-input size="large" :prefix-icon="User" v-model="fromModel.username" type="text" class="form_input"
                        placeholder="请输入用户名" autocomplete="off" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input size="large" :prefix-icon="Lock" v-model="fromModel.password" type="password"
                        class="form_input" placeholder="请输入密码" autocomplete="off" />
                </el-form-item>
                <p class="goRegister"><span class="btn" @click="btn">去注册</span></p>
                <img v-show="check" @click="checkItem" class="check" src="../../assets/圆圈_选中.png" alt="">
                <img v-show="!check" @click="checkItem" class="check" src="../../assets/未选中圆圈.png" alt="">
                <span class="accpet">
                    已阅读并同意小米账号 <span class="detil">用户协议</span> 和 <span class="detil">隐私政策</span></span>
                <el-button  v-show="!check" disabled class="submit" type="primary" style="min-width: 200px" round @click="loginBtn">登录</el-button>
                <el-button v-show="check" class="submit" type="primary" style="min-width: 200px" round @click="loginBtn">登录</el-button>
            </el-form>
        </div>
    </div>
</template>
<style scoped>
.body {
    padding-top: 50px;
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    background-color: #fff;
}
.registerBox,
.loginBox
{
    position: absolute;
    top: 240px;
    left: 10vw;
}
.goRegister,
.goLogin{
    text-align: end;
    color: #999;
}

.submit{
    margin-top: 10px;
    margin-left: 18vw;
}
.logo{
    width: 48px;
    
}
.img-box{
    text-align: center;
}
h2{
    text-align: center;
}
.accpet{
    position: absolute;
    bottom: 38px;
    left: 60px;
    font-size: 12px;
}
.check{
    position: absolute;
    bottom:37px;
    left: 41px;
}
.detil{
    color: blue;
    border-bottom:1px solid blue ;
}

</style>